<template>
  <div class="layout-container result-visual-display">
    <FlowStep :activeStep="4" />
    <div class="visual-box">
      <BaseInfoForm :baseInfo="baseInfo" />

      <TagIcon title="融合计算结果" :style="tagIconStyle" />
      <div class="fusion-calculation-results">
        <PieChart
          v-for="(item, index) in pieChartData"
          :key="index"
          :index="index"
          :title="item.hisSampleName"
          :chartData="[pieChartData[index]]"
        />
        <el-empty v-if="!pieChartData.length" description="暂无数据" />
      </div>

      <TagIcon title="静态特征相似性" :style="tagIconStyle" />
      <div class="static-feature-similarity">
        <BarChart v-if="barChartData.length" :chartData="barChartData" />
        <el-empty v-else description="暂无数据" />
      </div>

      <TagIcon title="动态相似性计算" :style="tagIconStyle" />
      <div class="dynmic-table">
        <CommonTable
          :data="dynmicTable"
          v-model:page="page"
          v-loading="loading"
          :showPagination="false"
          :showSelection="false"
          style="height: '0'; margin-top: 10px"
          @onQuery="onQuery"
          @selection-change="onDynmicSelectChange"
        >
          <el-table-column
            prop="hisSampleName"
            label="历史试验数据名称"
            width="140"
          />
          <el-table-column label="基于动态时间弯曲的序列距离" align="center">
            <el-table-column
              prop="baseInfoDegree"
              label="试验样本基础信息匹配度"
            />
            <el-table-column
              prop="staticParaDegree"
              label="试验场景说明描述匹配度"
            />
            <el-table-column
              prop="dynamicParaDegree"
              label="战技使用描述匹配度"
            />
            <el-table-column prop="matchDegree" label="整体加权匹配度" />
          </el-table-column>
        </CommonTable>

        <CommonTable
          :data="dynmicTable2"
          v-model:page="page"
          v-loading="loading"
          :showPagination="false"
          :showSelection="false"
          style="height: '0'; margin-top: 10px"
          @onQuery="onQuery"
          @selection-change="onDynmicSelectChange"
        >
          <el-table-column
            prop="hisSampleName"
            label="历史试验数据名称"
            width="140"
          />
          <el-table-column label="基于灰色关联度的形状相似性" align="center">
            <el-table-column
              prop="baseInfoDegree"
              label="试验样本基础信息匹配度"
            />
            <el-table-column
              prop="staticParaDegree"
              label="试验场景说明描述匹配度"
            />
            <el-table-column
              prop="dynamicParaDegree"
              label="战技使用描述匹配度"
            />
            <el-table-column prop="matchDegree" label="整体加权匹配度" />
          </el-table-column>
        </CommonTable>

        <CommonTable
          :data="dynmicTable3"
          v-model:page="page"
          v-loading="loading"
          :showPagination="false"
          :showSelection="false"
          style="height: '0'; margin-top: 10px"
          @onQuery="onQuery"
          @selection-change="onDynmicSelectChange"
        >
          <el-table-column
            prop="hisSampleName"
            label="历史试验数据名称"
            width="140"
          />
          <el-table-column
            label="融合注意力机制的动态特征向量相似度"
            align="center"
          >
            <el-table-column
              prop="baseInfoDegree"
              label="试验样本基础信息匹配度"
            />
            <el-table-column
              prop="staticParaDegree"
              label="试验场景说明描述匹配度"
            />
            <el-table-column
              prop="dynamicParaDegree"
              label="战技使用描述匹配度"
            />
            <el-table-column prop="matchDegree" label="整体加权匹配度" />
          </el-table-column>
        </CommonTable>
      </div>
    </div>

    <div class="step-buttons common-buttons" v-if="!disabled">
      <el-button type="primary" @click="onBack">上一步</el-button>
      <el-button type="primary" @click="onExport">导出</el-button>
      <el-button type="primary" @click="onEnterReckonFlow"
        >进入推算流程</el-button
      >
    </div>

    <!-- 查看后返回主页 -->
    <div class="step-buttons common-buttons" v-if="disabled">
      <el-button type="primary" @click="onBackHome">返回</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import CommonTable from "@/components/common-table/index.vue";
import { Page } from "@/components/common-table/type";
import TagIcon from "@/components/tag-icon/index.vue";
import BaseInfoForm from "../BaseInfoForm/index.vue";
import {
  httpResultVisiualDisplayList,
  httpResultVisiualDisplayExportFile,
} from "@/api/similarityEvaluationSystem";
import {
  reverseContentType,
  downloadFile,
  delSessionStorage,
} from "@/utils/tools";
import PieChart from "./components/PieChart/index.vue";
import BarChart from "./components/BarChart/index.vue";
import FlowStep from "../FlowStep/index.vue";

const colorList = [
  "rgba(98, 143, 221, 1)",
  "rgba(20, 201, 93, 1)",
  "rgba(237, 107, 107, 1)",
];

const pieChartData = ref([]);
const barChartData = ref([]);

let $router = useRouter();
const route = useRoute();
const tagIconStyle = reactive({ paddingLeft: "16px", paddingBottom: 0 });
const disabled = route.query.layerType === "look" ? true : false;

// 静态表格
const staticTable = ref<any>([]);
// 动态表格
const dynmicTable = ref<any>([]);
const dynmicTable2 = ref<any>([]);
const dynmicTable3 = ref<any>([]);
const dynmicSelectKeys = ref<string[]>([]);
// 多种融合
const multiFuseTable = ref<any>([]);

const loading = ref<boolean>(false);
const page = reactive<Page>({
  current: 1,
  pageSize: 20,
});
const baseInfo = ref({})

onMounted(() => {
  onQuery({ pageNo: 1 });
});

// 查询数据
const onQuery = (val: any) => {
  const params = {
    pageSize: page.pageSize,
    pageNo: page.current,
    ...val,
  };
  loading.value = true;
  httpResultVisiualDisplayList({ sampleId: route.query.dealSampleId }).then(
    (res) => {
      const result = res.data;
      loading.value = false;
      const { dynamic, fusion, sampleBaseInfoVO } = result;
      // 基础信息
      baseInfo.value = sampleBaseInfoVO;
      // 圆环图
      pieChartData.value = fusion;
      pieChartData.value.map((item, index) => {
        item.color = colorList[index];
      });

      // 柱状图
      barChartData.value = result.static;

      // 动态相似性
      // dynmicTable.value = dynamic;
      dynmicTable.value.map((item: any) => {
        if (item.computingMode === "DTW") {
          item.computingModeName = "基于动态时间弯曲的序列距离";
        } else if (item.computingMode === "shap") {
          item.computingModeName = "基于灰色关联度的形状相似性";
        } else {
          item.computingModeName = "融合注意力机制的动态特征向量相似度";
        }
      });

      dynmicTable.value = filterDWTData(dynamic);
      dynmicTable2.value = filterShapData(dynamic);
      dynmicTable3.value = filterCosineData(dynamic);
      dynmicSelectKeys.value = [];
    }
  );
};

// 过滤出DTW数据
const filterDWTData = (data: any) => {
  if (data && data.length) {
    return data.filter((item: any) => item.computingMode === "DTW");
  } else {
    return [];
  }
};

// 过滤出Shap数据
const filterShapData = (data: any) => {
  if (data && data.length) {
    return data.filter((item: any) => item.computingMode === "shape");
  } else {
    return [];
  }
};

// 过滤出cosine数据
const filterCosineData = (data: any) => {
  if (data && data.length) {
    return data.filter((item: any) => item.computingMode === "cosine");
  } else {
    return [];
  }
};

// 过滤出keys
const filterKeys = (arr: []) => {
  let keys: string[] = [];
  for (let item of arr) {
    keys.push(item.id);
  }
  return keys;
};

// 动态特征向量表格勾选
const onDynmicSelectChange = (val: []) => {
  dynmicSelectKeys.value = filterKeys(val);
};

// 返回上一步
const onBack = () => {
  if (route.query.pageType === "patch") {
    $router.push({
      path: "/similarityEvaluateSystem/resultList",
      query: {
        dealSampleId: route.query.dealSampleId,
      },
    });
  } else {
    $router.push({
      path: "/similarityEvaluateSystem/dynamicCalculate",
      query: {
        dealSampleId: route.query.dealSampleId,
      },
    });
  }
};

// 查看后，点击返回，回到相似性列表页
const onBackHome = () => {
  $router.push({
    path: "/similarityEvaluateSystem/testSampleSelected",
    query: {},
  });
};

// 导出
const onExport = () => {
  downloadFile(
    httpResultVisiualDisplayExportFile,
    { sampleId: route.query.dealSampleId },
    "可视化结果数据"
  );
  onQuery({ pageNo: 1 });
};

// 进入推算流程
const onEnterReckonFlow = () => {
  delSessionStorage();
  $router.push({
    path: "/antiJamPerformCalculateSystem/fuseCalculate",
    query: {
      sampleId: route.query.dealSampleId,
      sampleName: route.query.sampleName,
    },
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/buttons";
.result-visual-display {
  .visual-box {
    height: calc(100vh - 120px);
    overflow: auto;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .fusion-calculation-results {
    display: flex;
    justify-content: center;
  }

  .el-empty {
    padding: 0;
  }
  
  .dynmic-table {
    padding: 0 16px;
  }

  .step-buttons {
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 10px rgba(218, 222, 224, 1);
    padding: 10px 0;
  }
}
</style>
